<template>
  <div>
    <van-search background='#1989fa' v-if='false' v-model='productPage.BRANUM' :show-action='show_action'
                @focus='show_action=true'
                @cancel='onCancel'
                placeholder='请输入搜索关键词'>
      <template #action>
        <div @click='onCancel' style='background:rgb(25, 137, 250);border:rgb(25, 137, 250) '>搜索</div>
      </template>
    </van-search>
    <div class='top'>
      <van-row class='row' gutter='6'>
        <van-col span='12'>
          <van-field v-model='productPage.BRANUM' clear-trigger='always' clearable placeholder='车牌号' />
        </van-col>
        <van-col span='12'>
          <van-field v-model='productPage.cz_text' @click='showPopup("cz_status")' readonly placeholder='处置状态' />
        </van-col>
      </van-row>
      <van-row class='row' gutter='6'>
        <van-col span='12'>
          <van-field v-model='productPage.time_start' readonly clear-trigger='always' clearable
                     @focus='showPopup("time_start")'
                     placeholder='开始时间'>
            <template #button>
              <i v-if='productPage.time_start' @click='productPage.time_start=""'
                 class='van-icon van-icon-clear van-field__clear'></i>
            </template>
          </van-field>
        </van-col>
        <van-col span='12'>
          <van-field v-model='productPage.time_end' readonly clear-trigger='always' clearable
                     @focus='showPopup("time_end")'
                     placeholder='结束时间'>
            <template #button>
              <i v-if='productPage.time_end' @click='productPage.time_end=""'
                 class='van-icon van-icon-clear van-field__clear'></i>
            </template>
          </van-field>
        </van-col>
      </van-row>
      <van-row class='row' gutter='6'>
        <van-col span='12' v-if='company_grade!=="4"'>
          <van-field v-model='productPage.area_text' @click='showPopup("area_code")' readonly placeholder='行政区' />
        </van-col>
        <van-col span='12' v-if='company_grade!=="4"'>
          <van-button @click='onCancel' type='primary' :loading='loading'
                      style='background:rgb(25, 137, 250);border:rgb(25, 137, 250) '
                      block>查询
          </van-button>
        </van-col>
        <van-col span='24' v-else>
          <van-button @click='onCancel' type='primary' :loading='loading'
                      style='background:rgb(25, 137, 250);border:rgb(25, 137, 250) '
                      block>查询
          </van-button>
        </van-col>
      </van-row>
    </div>
    <van-popup v-model='show_popup' position='bottom'>
      <van-datetime-picker
        v-model='time'
        v-if='show_type==="time_start"'
        type='datetime'
        :title='"选择开始时间"'
        :min-date='minDate'
        :max-date='maxDate'
        @cancel='show_popup = false'
        @confirm='confirm'
      />
      <van-datetime-picker
        v-model='time2'
        v-if='show_type==="time_end"'
        type='datetime'
        :title='"选择结束时间"'
        :min-date='minDate'
        :max-date='maxDate'
        @cancel='show_popup = false'
        @confirm='confirm'
      />
      <van-picker
        title='处置状态'
        show-toolbar
        v-if='show_type==="cz_status"'
        :columns='czArr'
        value-key='lable'
        @cancel='show_popup = false'
        @confirm='czConfirm'
      />
      <van-picker
        title='行政区'
        show-toolbar
        v-if='show_type==="area_code"'
        :columns='areaList'
        value-key='lable'
        @cancel='show_popup = false'
        @confirm='areaConfirm'
      />
    </van-popup>
    <van-list
      v-model='loading'
      :finished='finished'
      :immediate-check='false'
      finished-text='没有更多了'
      @load='onLoad'
    >
      <van-swipe-cell v-for='(item,index) in datalist' :key='index'>
        <van-cell @click='toPage(item)' :border='false' :label='"停止时间："+item.on_time' :value='"状态："+item.tl_type'
                  :title='"车牌号："+item.BRANUM'>
        </van-cell>
        <template #right>
          <van-button square style='background:#19be6b;border:#19be6b ' @click.stop='toMap(item)' type='primary'
                      text='查看位置' />
          <van-button square v-if='item.carczMsg' style='background:#f90 ;border:#f90 ' @click.stop='toPage(item)'
                      type='primary'
                      text='查看处置' />
          <van-button square v-else style='background:#f90 ;border:#f90 ' @click.stop='toDisposal(item)' type='primary'
                      text='处置' />
        </template>
      </van-swipe-cell>
    </van-list>
  </div>
</template>

<script>
// import VConsole from 'vconsole'

import { findTlCarNewRealTimeList, getSstCodeForWorker } from '@/api/gov/car_stop'

export default {
  name: 'list',
  data () {
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      show_popup: false,
      show_type: '',
      time: new Date(),
      time2: new Date(),
      loading: false,
      finished: false,
      datalist: [],
      area_code: '',
      company_grade: '',
      show_action: false,
      productPage: {
        pageSize: 20,
        pageNo: 1,
        BRANUM: '',
        time_start: '',
        start: 0,
        end: 0,
        time_end: '',
        cz_status: '',
        area_code: '',
        area_text: '',
        cz_text: ''
      },
      areaList: [
        {
          value: '',
          lable: '全部',
          code: ''
        },
        {
          value: '210102',
          lable: '和平区',
          code: 'LM00001'
        },
        {
          value: '210103',
          lable: '沈河区',
          code: 'LM00002'
        },
        {
          value: '210104',
          lable: '大东区',
          code: 'LM00003'
        },
        {
          value: '210105',
          lable: '皇姑区',
          code: 'LM00004'
        },
        {
          value: '210106',
          lable: '铁西区',
          code: 'LM00005'
        },
        {
          value: '210111',
          lable: '苏家屯区',
          code: 'LM00009'
        },
        {
          value: '210112',
          lable: '浑南区',
          code: 'LM00006'
        },
        {
          value: '210113',
          lable: '沈北新区',
          code: 'LM00008'
        },
        {
          value: '210114',
          lable: '于洪区',
          code: 'LM00007'
        },
        {
          value: '210115',
          lable: '辽中区',
          code: 'LM00010'
        },
        {
          value: '210181',
          lable: '新民市',
          code: 'LM00013'
        },
        {
          value: '210123',
          lable: '康平县',
          code: 'LM00011'
        },
        {
          value: '210124',
          lable: '法库县',
          code: 'LM00012'
        }
      ],
      czArr: [{
        value: '',
        lable: '全部'
      }, {
        value: 'yes',
        lable: '已处置'
      }, {
        value: 'no',
        lable: '未处置'
      }],
      projectListArr: [
        {
          value: '1',
          lable: '蓝色'
        },
        {
          value: '2',
          lable: '黄色'
        },
        {
          value: '3',
          lable: '黑色'
        },
        {
          value: '4',
          lable: '白色'
        },
        {
          value: '5',
          lable: '绿色'
        },
        {
          value: '9',
          lable: '其他'
        }
      ]
    }
  },
  mounted () {
    // let a = new VConsole()
    // console.log(a)
    // let x = {
    //   'errcode': 0,
    //   'data': {
    //     'pageNo': 1,
    //     'pageSize': 20,
    //     'totalRecord': 6412,
    //     'totalPage': 321,
    //     'results': [
    //       {
    //         'on_lng': '123.1743030',
    //         'on_time': '2022-05-20 08:44:35',
    //         'BRANUM': '辽ACK610',
    //         'area_code': '210114',
    //         'on_lat': '41.8255230',
    //         't_time': 4.0658,
    //         'BRACOLOR': '2',
    //         'tl_type': '停车'
    //       },
    //       {
    //         'on_lng': '122.8645350',
    //         'on_time': '2022-05-20 08:44:06',
    //         'BRANUM': '辽CC4771',
    //         'area_code': '210181',
    //         'on_lat': '41.9864830',
    //         't_time': 4.0739,
    //         'BRACOLOR': '2',
    //         'tl_type': '停车'
    //       }
    //     ],
    //     'params': null
    //   },
    //   'errmsg': 'success'
    // }
    // for (const xKey in x.data.results) {
    //   for (const y in this.projectListArr) {
    //     if (x.data.results[xKey].BRACOLOR == this.projectListArr[y].value) {
    //       x.data.results[xKey].BRACOLOR_text = this.projectListArr[y].lable
    //     }
    //   }
    // }
    // this.datalist = x.data.results
    this.function_getSstCodeForWorker()
  },
  methods: {
    areaConfirm (c) {
      this.productPage.area_code = c.value
      this.productPage.area_text = c.lable
      this.show_popup = false
    },
    czConfirm (c) {
      this.productPage.cz_status = c.value
      this.productPage.cz_text = c.lable
      this.show_popup = false
    },
    showPopup (type) {
      this.show_type = type
      this.show_popup = true
    },
    confirm (e) {
      let time = new Date(e).getTime()
      if (this.show_type === 'time_start') {
        this.productPage.time_start = this.format(e)
        this.productPage.start = time
      } else if (this.show_type === 'time_end') {
        this.productPage.time_end = this.format(e)
        this.productPage.end = time
      }
      this.show_popup = false
    },
    add0 (m) {
      return m < 10 ? '0' + m : m
    },
    format (shijianchuo) {
      // shijianchuo是整数，否则要parseInt转换
      var time = new Date(shijianchuo)
      var y = time.getFullYear()
      var m = time.getMonth() + 1
      var d = time.getDate()
      var h = time.getHours()
      var mm = time.getMinutes()
      var s = time.getSeconds()
      return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s)
    },
    onCancel () {
      if (this.productPage.start == 0 && this.productPage.end != 0) {
        this.$toast.fail('未选择开始时间')
        return
      }
      if (this.productPage.start != 0 && this.productPage.end == 0) {
        this.$toast.fail('未选择结束时间')
        return
      }
      if (this.productPage.start != 0 && this.productPage.end != 0) {
        if (this.productPage.start === this.productPage.end) {
          this.$toast.fail('开始时间不能等于结束时间')
          return
        }
        if (this.productPage.start > this.productPage.end) {
          this.$toast.fail('开始时间不能大于结束时间')
          return
        }
      }
      this.productPage.pageNo = 1
      this.datalist = []
      this.onLoad()
    },
    toPage (data) {
      /// this.$store.state.stopData
      this.$router.push({ name: 'car_stop_index', query: { data: JSON.stringify(data) } })
    },
    toDisposal (data) {
      this.$router.push({ name: 'car_stop_disposal', query: { data: JSON.stringify(data) } })
    },
    toMap (data) {
      this.$router.push({ name: 'car_stop_map', query: { data: JSON.stringify(data) } })
    },
    onLoad () {
      this.loading = true
      findTlCarNewRealTimeList(this.productPage).then(ret => {
        if (ret.data.errcode === 0) {
          this.loading = false
          for (const xKey in ret.data.data.results) {
            for (const y in this.projectListArr) {
              if (ret.data.data.results[xKey].BRACOLOR == this.projectListArr[y].value) {
                ret.data.data.results[xKey].BRACOLOR_text = this.projectListArr[y].lable
              }
            }
          }
          this.datalist.push.apply(this.datalist, ret.data.data.results)
          if (this.datalist.length >= this.productPage.pageNo * this.productPage.pageSize) {
            this.productPage.pageNo++
          } else {
            this.finished = true
          }
        } else {
          this.$toast.fail(ret.data.errmsg)
        }
      })
    },
    function_findTlCarNewRealTimeList (data) {
      if (data.company_grade == '4') {
        this.company_grade = '4'
        for (const a in this.areaList) {
          if (this.areaList[a].code === data.parent_code) {
            this.area_code = this.areaList[a].value
            break
          }
        }
      }
      this.productPage.area_code = this.area_code
      this.onLoad()
    },
    function_getSstCodeForWorker () {
      // let ret =
      //   {
      //     'errcode': 0,
      //     'errmsg': '登录成功！',
      //     'userMap': {
      //       'company_type': '1',
      //       'no': 'LM40017',
      //       'bind_seller_sys_area': 'LM',
      //       'company_id': '999999999',
      //       'level': '10',
      //       'company_grade': '2',
      //       'bind_seller_company_code': 'LM',
      //       'mobile': '17700000000',
      //       'parent_ids': '0,65c788d15f0f41fdb9ac8a61874e1984,',
      //       'office_childs_code': '',
      //       'system': 'cargo',
      //       'parent_id': '65c788d15f0f41fdb9ac8a61874e1984',
      //       'company_name': '沈阳市',
      //       'loginName': 'LM40017',
      //       'name': '开发专用',
      //       'parent_code': 'AA',
      //       'limit_system': 'csc,grid,worker,xgc,',
      //       'company_code': 'LM',
      //       'parent_codes': '0,AA,',
      //       'id': '4ed30ea9-eab1-11eb-8cc6-0242ac110002',
      //       'userType': '1',
      //       'company_sys_area': 'LM',
      //       'email': 'ZiTuDevice',
      //       'bind_seller_login_code': 'LM40017'
      //     },
      //     'key': '97adff6f44ba49d18b1bdb219967bf74'
      //   }
      getSstCodeForWorker().then(ret => {
        if (ret.data.errcode == 0) {
          this.function_findTlCarNewRealTimeList(ret.data.userMap)
        } else {
          this.$toast.fail(ret.data.errmsg)
        }
      })
    }
  }
}
</script>

<style scoped>
.van-search__action {
  color: #ffffff;
}

.list {
  background: #1c4cc8;
  margin: 10px 0;
  height: 100px;
}

.van-cell__value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.van-button--square {
  height: 100%;
}

.top {
  background: #FAFAFA;
  padding: 10px 20px;
}

.row {
  margin-bottom: 20px;
}
</style>
